<template>
  <div class="pane">
    <div>
      <el-form :inline="true" :model="selectData" class="demo-form-inline" :rules="rules" ref="ruleFormRef">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="selectData.projectName" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="负责人" prop="leaderId">
          <el-select v-model="selectData.leaderId" class="m-2" placeholder="请选择">
            <el-option label="小宇" value="40" />
            <el-option label="李四" value="43" />
            <el-option label="大远" value="9" />
          </el-select>
        </el-form-item>
        <el-form-item label="启动日期" prop="launchDate">
          <el-input v-model="selectData.launchDate" placeholder="请输入启动时间" />
        </el-form-item>
        <el-form-item label="项目周期" prop="memberNumber">
          <el-input v-model="selectData.memberNumber" placeholder="请输入项目周期" />
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align:center;margin-top:18px;">
      <el-button type="primary" @click="handleNextStep(ruleFormRef)">下一步</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref,} from 'vue'
import { InitData } from '@/type/project'
import { addProjectList } from "@/request/projectapi";
import type { FormInstance } from "element-plus";
export default defineComponent({
  emits: ["handleNextStep"],
  setup(prop, ctx) {
    const data = reactive(new InitData())
    //获取数据
    onMounted(() => {
      //addProject()
    });
    // const checkDate=(str:any)=>{
    //   let reg=/^(\d{4})-(\d{2})-(\d{2})$/;
    // if (str=='') {
    //     return false;
    // }
    // var arr=reg.exec(str);

    // if(!reg.test(str) || ''){
    //     return false;
    // }
    // return true;

    // }
    const rules = {
      projectName: [
        { required: true, message: "请输入项目名称", trigger: "blur" },
        {
          min: 1,
          max: 10,
          message: "长度在1-10之间",
          trigger: "blur",
        },
      ],
      leaderId: [
        { required: true, message: "请选择负责人", trigger: "blur" },
      ],
      launchDate: [
        { required: true, message: "请输入启动时间", trigger: "blur" },
        {
          min: 10,
          max: 10,
          message: "请输入YYYY-MM-DD格式",
          trigger: "blur",
        },
      ],
      memberNumber: [
        { required: true, message: "请输入项目周期", trigger: "blur" },
        {
          min: 1,
          max: 4,
          message: "长度为1-4的整数",
          trigger: "blur",
        },
      ],
    }
    
    const ruleFormRef = ref<FormInstance>();
    
    const handleNextStep = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {       
          console.log('submit!')
          ctx.emit('handleNextStep', { id: '1' })
          const getparams: Object = {
            projectName: data.selectData.projectName,
            leaderId: data.selectData.leaderId,
            launchDate: data.selectData.launchDate,
            duration: data.selectData.duration,
          }
          addProjectList(getparams).then((res) => {
            console.log(res);
            localStorage.setItem("projectId", JSON.stringify(res.data));
          })
          
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
    return { ...toRefs(data), rules, ruleFormRef, handleNextStep }
  },
  methods: {}
})
</script>

<style scoped>
</style>